<template>
	<view class="steps-bar">
		<uv-steps :current="current" :dot="true">
			<uv-steps-item v-for="(item, index) in steps" :key="index" :title="item.title" :current="item.current"
				:error="item.current < current + 2" @click="handleClick(item.current)">
				<template v-slot:icon>
					<view class="step-icon" :class="{ active: item.current < current + 2 }">
						<view :class="{ activeBorder: item.current === activeIndex  }" class="border rowCenter">
							<uv-icon v-if="item.current < current + 1" name="checkmark" size="20"
								color="#fd5f47"></uv-icon>
							<text v-else>{{ item.current }}</text>
						</view>
					</view>
				</template>

				<template v-slot:title>
					<view class="w100 rowCenter mtb30 titleH3" style="flex-wrap: nowrap">
						<text>{{ item.title }}</text>
					</view>
				</template>
			</uv-steps-item>
		</uv-steps>
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: Number,
				default: 1,
			},
			activeIndex: {
				type: Number,
				default: 1,
			},
			steps: {
				type: Array,
				default: () => [],
			},
		},
		methods: {
			handleClick(current) {
				if (current - 1 == this.current || current == this.current || this.current > current) {
					this.$emit("sendCurrent", current);
				}

			},
		},
	};
</script>

<style scoped lang="scss">
	.step-icon {
		padding: 8rpx;
		box-sizing: border-box;
		border-radius: 50%;
		background-color: var(--themeFontColor5);
		color: #fff;
	}

	.active {
		background-color: #ffeee5;
		color: var(--themeDefultFontColor);
	}

	.border {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid transparent;
		border-radius: 50%;
	}

	.activeBorder {
		border: 4rpx solid var(--themeDefultFontColor);
		border-radius: 50%;
	}
</style>